<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="Knight of Artoria">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_614257_91ga9usa001f9a4i.css">
    <link rel="stylesheet" href="../css/Shopping-Car.css">
    <title>购物车</title>
</head>

<body>
    <div class="mobile">
        <input type="checkbox" class="goods-check" name="" id="four">
        <input type="checkbox" class="goods-check" name="" id="one">
        <input type="checkbox" class="goods-check" name="" id="two">
        <input type="checkbox" class="goods-check" name="" id="three">
        <section>
            <ul>
                <li>
                    <label for="one">
                        <p>
                            <i class="iconfont icon-duihao"></i>
                        </p>
                    </label>
                    <div class="img-box">
                        <img src="../img/help-to-buy-goods-1.png" alt="">
                    </div>
                    <div class="text">
                        <h2>
                            【模板】18K金鑽石戒指
                        </h2>
                        <p>
                            ￥40.5
                        </p>
                        <p>
                            <span class="minus">-</span>
                            <span class="num">1</span>
                            <span class="add">+</span>
                        </p>
                        <i class="iconfont icon-cuowu">
                            移除
                        </i>
                    </div>
                </li>
                <li>
                    <label for="two">
                        <p>
                            <i class="iconfont icon-duihao"></i>
                        </p>
                    </label>
                    <div class="img-box">
                        <img src="../img/help-to-buy-goods-1.png" alt="">
                    </div>
                    <div class="text">
                        <h2>
                            【模板】18K金鑽石戒指
                        </h2>
                        <p>
                            ￥40.5
                        </p>
                        <p>
                            <span class="minus">-</span>
                            <span class="num">1</span>
                            <span class="add">+</span>
                        </p>
                        <i class="iconfont icon-cuowu">
                            移除
                        </i>
                    </div>
                </li>
                <li>
                    <label for="three">
                        <p>
                            <i class="iconfont icon-duihao"></i>
                        </p>
                    </label>
                    <div class="img-box">
                        <img src="../img/help-to-buy-goods-1.png" alt="">
                    </div>
                    <div class="text">
                        <h2>
                            【模板】18K金鑽石戒指
                        </h2>
                        <p>
                            ￥40.5
                        </p>
                        <p>
                            <span class="minus">-</span>
                            <span class="num">1</span>
                            <span class="add">+</span>
                        </p>
                        <i class="iconfont icon-cuowu">
                            移除
                        </i>
                    </div>
                </li>
            </ul>
        </section>
        <footer>
            <p>
                <label for="four">
                    <span>
                        <i class="iconfont icon-duihao"></i>
                    </span>
                </label>
                <span>
                    全选
                </span>
            </p>
            <div class="text">
                <p>
                    总价
                    <span>
                        ￥1230.5
                    </span>
                </p>
                <p>
                    (共1件，不含运费)
                </p>
            </div>
            <button>
                去结算
            </button>
        </footer>
    </div>
    <script>
        var minus = document.querySelectorAll('.minus');
        var add = document.querySelectorAll('.add');
        var num = document.querySelectorAll('.num');

        function numMinus(j) {
            var numItem = num[j];
            numItem.textContent--;
            if (numItem.textContent < 0) {
                numItem.textContent = 0;
            }
        };

        function numAdd(j) {
            var numItem = num[j];
            numItem.textContent++;
        };
        minus[0].addEventListener('click', function () {
            numMinus(0);
        });
        minus[1].addEventListener('click', function () {
            numMinus(1);
        });
        minus[2].addEventListener('click', function () {
            numMinus(2);
        });
        add[0].addEventListener('click', function () {
            numAdd(0);
        });
        add[1].addEventListener('click', function () {
            numAdd(1);
        });
        add[2].addEventListener('click', function () {
            numAdd(2);
        })

        var allXuan = document.getElementById('four');
        var goodsCheck = document.querySelectorAll('.goods-check');

        allXuan.addEventListener('click', function () {
            for(var i = 0 ; i< goodsCheck.length ; i++){
                
            }
        });
    </script>
</body>

</html>